<template>
	<div>
    <p id="find" style="margin-top:20px;margin-bottom:20px">

    
    <el-input
      placeholder="请输入姓名或账号"
      v-model="uname"
      style="width: 180px"
      autosize
      clearable>
    </el-input>
    <el-input
      placeholder="请输入身份证号"
      v-model="idcard"
      style="width: 180px"
      autosize
      clearable>
    </el-input>
     &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
    <el-button type="primary" size="small"  @click="findBy">搜索</el-button>
		</p>
    
    <el-table
    :data="userlist.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
    stripe
    style="width: 100%">
    <el-table-column
      prop="uname"
      label="用户名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="trueName"
      label="真实姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="ugender"
      label="性别"
      width="180">
    </el-table-column>
	<el-table-column
      prop="uphone"
      label="用户电话">
    </el-table-column>
    <el-table-column
      prop="uidcard"
      label="身份证号">
    </el-table-column>
    <el-table-column
      prop="uaccount"
      label="用户账号">
    </el-table-column>
    <!-- <el-table-column
      prop="uaccount_status"
      :formatter="formatter2"
      label="用户状态">
    </el-table-column> -->
     <el-table-column 
        label="操作" width="250px">
        <template  slot-scope="scope">
           <el-button type="danger"  @click="del(scope.row)">删除</el-button>
           <el-button type="primary"  @click="detail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    <el-table-column
      prop="ustate"
      :formatter="formatter"
      label="是否在黑名单">
    </el-table-column>
  </el-table>

    
     <!-- 分页器 -->
    <div class="block" style="margin-top: 15px">
      <el-pagination
        align="center"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10,20,100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="userlist.length"
      >
      </el-pagination>
      
    </div>
  

	</div>
	
</template>

<script>
	export default {
		data(){
			return{
        uname:"",
        idcard:"",
        userlist:[],
        currentPage: 1,
        pageSize:5,
			}

		},

		mounted(){
			this.list();	
		},
		methods:{
      findBy(){
          this.list();
      },
      handleSizeChange(size) {
        this.currentPage = 1;
        this.pageSize = size;  
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
      },


			list(){
        var the = this;
        this.sa.ajax("/e-user/user/renterQuery",
        {uname:the.uname,uidcard:the.idcard},
				function(response){
          console.log(response);
          the.userlist=response.data;
				}
			)
			},
			
			formatter(row){
                return row.ustate == 1? "正常" : "黑名单";
			},
			formatter2(row){
                return row.ustate == 1? "正常" : "停用";
			},
			del(data){
        var the = this;
                the.layer.confirm("确定删除该用户？",
                
                {btn:['关闭','确定']},
                
                function(){
                  alert("222");
                  var index = the.layer.open();
                  the.layer.close(index);

                },
                function(){
                  var index = the.layer.open();
                  the.layer.close(index);
                   the.sa.ajax("/e-user/user/del",
               {uid:data.uid},
               function(response){
                 console.log(response);
                 the.list();
             }
              )
                })
      },
      detail(data){
        var the = this;              
        console.log(data);
        this.sa.ajax("/e-user/user/renterDetail",
        {uid:data.uid},
        function(response){
          console.log(response);
          var tab = {id: 'renterDetail', name: '详细信息', view: () => import('@/sa-view/nd/renterDetail.vue'), params: {renterList: response.data} };
          the.sa_admin.showTab(tab);
        })
      }
		}
		
		
	}
</script>

<style>


</style>